<template>
	<view>
		<view>hello world</view>
		<view>
			<text>文字没空格，不可选中</text>
		</view>
		<view>
			<text selectable="true">文字没空格，可选中</text>
		</view>
		<view>
			<!-- 一个空格一个文字字符位 -->
			<text space="emsp">emsp文字  两个空格</text>  
		</view>
		<view>
			<!-- 两个空格一个文字字符位 -->
			<text space="ensp">ensp文字  两个空格</text>
		</view>
		<view>
			<!-- 根据文字设置大小，四个空格一个文字位 -->
			<text space="nbsp" style="font-size: 20px;">nbsp文字    四个空格</text>
		</view>
		<!-- hover-class点击效果 -->
		<view class="big-box" hover-class="big-box-active">大盒子
			<!-- hover-stop-propagation阻止事件冒泡，vue语法@click.stop.prevent不可行 -->
			<!-- hover-start-time 点击后延迟多少毫秒出现效果 -->
			<!-- hover-stay-time 松开后延迟多少毫秒效果消失 -->
			<view class="inner-box" hover-class="inner-box-active" hover-stop-propagation	>小盒子</view>
		</view>
		
		<!-- button组件 -->
		<button>按钮</button>
		<button size="mini">按钮</button>
		<!-- type在每个平台颜色不一样 -->
		<button type="primary">按钮</button>
		
		<!-- image组件 ，默认缩放320*240 -->
		<image src="../../static/imgs/1.jpg"></image>
		<!-- mode设置图片样式，共13种 aspectFit按长边正常显示 -->
		<image src="../../static/imgs/1.jpg" mode="aspectFit"></image>
		
		<!-- 数据绑定 -->
		<!-- :key="item.id"，因小程序wx:for警告 -->
		<view v-for="(item, index) in arr" :key="item.id">
			<!-- index从0开始 -->
			ID:{{index+1}},Name:{{item.name}},Age:{{item.age}}
		</view>
	</view>
</template>

<script>
	export default{
		data(){  //这里data为方法，不是对象，不能写冒号
			return{
				arr:[
					{
						id:1,
						name:"go",
						age:20
					},
					{
						id:2,
						name:"花",
						age:18
					},
					
				]
			}
		}
	}
</script>

<style>
	.big-box{
		width: 200px;
		height: 200px;
		background: #007AFF;
	}
	.inner-box{
		width: 100px;
		height: 100px;
		background: #4CD964;
	}
	.big-box-active{
		background: #DD524D;
	}
	.inner-box-active{
		background: #F0AD4E;
	}
</style>
